<template>
  <!-- <div class="App">
    <div class="box" @click="fn"></div>
  </div> -->

  <!-- 全局组件和局部组件 -->
  <!-- <div class="App"> -->
    <!-- 头部组件 -->
    <!-- <hmHeader></hmHeader> -->
    <!-- 主体组件 -->
    <!-- <hmMain></hmMain> -->
    <!-- 底部组件 -->
    <!-- <hmFooter></hmFooter> -->
  <!-- </div> -->

  <div class="App">
    <!-- 快捷链接 -->
    <XtxShortCut></XtxShortCut>
    <!-- 顶部导航 -->
    <XtxHeaderNav></XtxHeaderNav>
    <!-- 轮播区域 -->
    <XtxBanner></XtxBanner>
    <!-- 新鲜好物 -->
    <XtxNewGoods></XtxNewGoods>
    <!-- 热门品牌 -->
    <XtxHotBrand></XtxHotBrand>
    <!-- 最新专题 -->
    <XtxTopic></XtxTopic>
    <!-- 版权底部 -->
    <XtxFooter></XtxFooter>
  </div>
</template>

<script>
// import HmFooter from './components/HmFooter.vue'
// import HmHeader from './components/HmHeader.vue'
// import HmMain from './components/HmMain.vue'
import XtxShortCut from './components/tuxian/XtxShortCut.vue'
import XtxHeaderNav from './components/tuxian/XtxHeaderNav.vue'
import XtxBanner from './components/tuxian/XtxBanner.vue'
import XtxNewGoods from './components/tuxian/XtxNewGoods.vue'
import XtxHotBrand from './components/tuxian/XtxHotBrand.vue'
import XtxTopic from './components/tuxian/XtxTopic.vue'
import XtxFooter from './components/tuxian/XtxFooter.vue'

// 导出的是当前组件的配置项,可以是data methods computed watch生命周期八大钩子
export default {
  // components: { HmHeader, HmMain, HmFooter },
  components: { XtxShortCut, XtxHeaderNav, XtxBanner, XtxNewGoods, XtxHotBrand, XtxTopic, XtxFooter },

  created() {
    console.log('我是created')
  },
  methods: {
    fn() {
      alert('你好')
    }
  },
}
</script>


<style lang="less">
/* 
  让style支持less
    1.给style加上lang="less"
    2.安装依赖包less less-loader
        yarn add less less-loader -D
*/
// .App {
//   width: 500px;
//   height: 650px;
//   background-color: #87ceeb;
//   margin: 0 auto;
//   padding: 20px;
// }
// .App .box {
//   width: 100px;
//   height: 100px;
//   background-color: skyblue;
// }
</style>